<template>
  <div>
    <p>click {{ count }} times,count is{{ evenOrOdd }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">incrementIfOdd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      count: 0,
    }
  },
  computed: {
    evenOrOdd() {
      return this.count % 2 === 0 ? '偶数' : '奇数'
    }
  },
  methods: {
    increment() {
      const count = this.count;
      this.count = count + 1
    },
    decrement() {
      const count = this.count
      this.count = count - 1
    },
    incrementIfOdd() {
      if (this.count % 2 === 0) {
        return
      }
      const count = this.count;
      this.count = count + 1
    },
    incrementAsync() {
      setTimeout(() => {
        const count = this.count;
        this.count = count + 1
      }, 500)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
